<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function load(){
				let c = document.getElementById('myC');
				let context = c.getContext('2d');

				context.moveTo(100,100);
//				context.lineTo(100,200);
				context.lineTo(300,200);
//				context.lineTo(300,100);
//				context.lineTo(100,100);
				context.stroke();

				context.strokeStyle='#FF0000';
				context.strokeRect(100,100,200,100);
				context.stroke();

				context.beginPath();
				context.arc(100,75,50,0,Math.PI/2,true);
				context.stroke();
				context.closePath();

				context.beginPath();
				context.moveTo(400,100);
				context.lineTo(500,100);
				context.lineTo(400,200);
				context.closePath();
				context.stroke();
//				context.fill();


				context.fillStyle='#00FF00';
				context.fillRect(300,200,100,100);

				context.beginPath();
				context.arc(100,75,25,0,Math.PI/2,true);
				context.closePath();
				context.fill();


			}

			window.onload = function(){
				load();
			}

			function clearCanvas(){
				let c = document.getElementById('myC');
				let context = c.getContext('2d');
				context.clearRect(0,0,800,450);
			}
		</script>


	</head>
	<body>
		<canvas id="myC" style="border: 1px #000 solid;" width="800" height="450">
			你的浏览器不支持canvas元素！
		</canvas>
		<input type="button" value="clear" onclick="clearCanvas()" />
	<div><script language="javascript">

	</script></div></body>
</html>
